<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head th:replace="common::head"></head>

<body>

<header>
    <!--页面顶部内容,登录登出等信息-->
    <div th:replace="common::page-top"></div>
    <!--搜索导航-->
    <div th:replace="common::search-nav"></div>
</header>
<!--主体内容-->
<div style="height: auto">
    <div class="header_banner" style="height: auto">
        <div th:replace="common::catalog"></div>
        <div class="header_main_center">
            <div name="itemBox" style="width: 100%">
                <!--产品细节 detail-->
                <div class="aa1" th:style="'background-image: url(/static/index/img1/aa.jpg)'"><span
                        id="Labelpart1">Part Information</span></div>

                <div style="min-height:260px;">
                    <div style="width:310px;float: left">
                        <form>
                            <img th:src="${detail.image}" width="299px">
                            <li style="list-style-type:none; margin-top: 8px">
                                <div style="float: left" th:if="${detail.image1}">
                                    <img th:src="${detail.image1}" width="60px" height="60px">
                                </div>
                                <div style="float: left" th:if="${detail.image2}">
                                    <img th:src="${detail.image2}" width="60px" height="60px">
                                </div>
                                <div style="float: left" th:if="${detail.image3}">
                                    <img th:src="${detail.image3}" width="60px" height="60px">
                                </div>
                                <div style="float: left" th:if="${detail.image4}">
                                    <img th:src="${detail.image4}" width="60px" height="60px">
                                </div>
                                <div style="float: left" th:if="${detail.image5}">
                                    <img th:src="${detail.image5}" width="60px" height="60px">
                                </div>
                                <div style="clear:both"></div>
                            </li>
                        </form>
                    </div>
                    <div class="a22s">
                        <li th:text="${'TYPE: &nbsp;&nbsp;' + detail.catalogEnname}"></li>
                        <li th:text="${'PART NO: &nbsp;&nbsp;' + detail.productNo}"></li>
                        <li>
                            <pre th:text="${'ATTRIBUTES: &nbsp;&nbsp;' + detail.attributes}"></pre>
                        </li>
                    </div>
                    <div style="clear:both"></div>
                </div>
                <!-- OEM号码 -->
                <!--产品细节 detail-->
                <div class="aa1" th:style="'background-image: url(/static/index/img1/aa.jpg);margin-top:8px'"><span
                        id="Labelpart1">OEM Number</span></div>
                <div class="a22s1">
                    <li th:each="oem : ${detail.oemList}">
                        <b th:text="${oem.brand}"></b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b
                            th:text="${oem.refNo}"></b>
                    </li>
                </div>
                <div class="aa1" th:style="'background-image: url(/static/index/img1/aa.jpg);margin-top:8px'"><span
                        id="Labelpart1">APPLICATION</span></div>
                <div class="a22s1">
                    <li th:each="car : ${detail.carList}">
                        <b th:text="${car.brand}"></b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b
                            th:text="${car.fullname}"></b>
                    </li>
                </div>

                <div class="section_second">
                    <!-- 第一层 -->
                    <div class="section_second_header">
                        <p class="section_second_header_img"></p>
                        <div class="section_second_header_left">
                            <p></p>
                            <span class="">Similar Products</span>
                            <span> </span>
                        </div>

                    </div>
                    <!--相似产品轮播图-->
                    <div class="section_second_list">
                        <div class="swiper-container swiper_section_second_list_left">
                            <div class="swiper-wrapper">
                                <div class="swiper-slide" th:each="item:${similarProducts}">
                                    <div class="hot-sell-item">
                                        <img th:src="${item.image}" alt="" style="width: 180px;height: 150px;">
                                        <a th:href="@{${#httpServletRequest.getScheme() + '://' + #httpServletRequest.getServerName()} + '/page/detail/' + ${item.id} }"
                                           th:text="${item.productNo}"
                                           style="color: #1E9FFF;Display:block;text-align:center"
                                        ></a>
                                        <p th:text="${item.attributes}" style="Display:block;text-align:center"></p>
                                    </div>
                                </div>
                            </div>
                            <div class="swiper-button-prev second_list">
                                <p></p>
                            </div>
                            <div class="swiper-button-next second_list">
                                <p></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>
<!--页脚-->
<div th:replace="common::footer"></div>
</body>

<script type="text/javascript" th:src="@{/static/index/js/text.js}"></script>
<script type="text/javascript" th:src="@{/static/index/js/header.js}"></script>
<script type="text/javascript" th:src="@{/static/index/js/secend.js}"></script>
<script type="text/javascript" th:src="@{/static/index/js/index.js}"></script>
<script type="text/javascript" th:src="@{/static/index/js/left,top.js}"></script>
<script type="text/javascript" th:src="@{/static/index/js/catalogLoader.js}"></script>
<style>
    .aa1 {
        width: 100%;
        height: 30px;
        margin-bottom: 1px;
        line-height: 30px;
        font-weight: bold;
        padding-left: 12px;
        float: left;
    }

    .a22s {
        margin-left: 325px;
        list-style: none;
        line-height: 30px;
        background-color: #cccccc;
        border-color: #cccccc;
        border-style: solid;
        border-width: 1px 1px 1px 1px;
        margin-top: 15px;
    }

    .a22s li {
        background-color: #ffffff;
        margin-bottom: 1px;
        padding-left: 15px;
    }

    .a22s1 {
        list-style: none;
        list-style-type: none;
        line-height: 30px;
    }

    .a22s1 li:first-child {
        margin-top: 8px;
    }

    .a22s1 li {
        background-color: #ffffff;
        margin-bottom: 1px;
        padding-left: 15px;
    }

</style>
</html>
